﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Checkbox列表双向选择移动代码</title>

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>

<style type="text/css">
	*{padding:0;margin:0;}

	li{
		list-style:none;
		cursor:pointer;
	}
	.selection-container{
		height:350px;
		margin:10px;
	}
	.select-box{
		width:250px;
		height:100%;
		border:1px solid #ccc;
		float:left;
	}
	.arrows-box{
		width:50px;
		height:100%;
		float:left;
		position:relative;
	}
	.select-content{
		width:100%;
		height:320px;
		overflow-y:auto;
		overflow-x:hidden;
	}
	.select-box-title{
		width:90%;
		height:30px;
		line-height:30px;
		font-size:12px;
		font-family:"微软雅黑";
		padding:0 5%;
		border-bottom:1px solid #ccc;
	}
	.select-box-title input{
		margin:8px 0;
	}
	.checkbox-all{
		float:right;
	}
	.checkboxs{
		vertical-align:middle;
	}
	.unselect-ul{
		padding:10px 0;
	}
	.select-content li{
		padding:5px 15px;
		font-size:12px;
		font-family:"微软雅黑";
	}
	.arrow-btns{
		width:100%;
		height:90px;
		position:absolute;
		top:50%;
		margin-top:-45px;
	}
	.arrow-btn{
		width:20px;
		height:12px;
		padding:18px 10px;
		background:#eee;
		border:1px solid #ccc;
		margin:0 auto 5px;
		cursor:pointer;
	}
	.arrow-btn i{
		display:inline-block;
		width:100%;
		height:100%;
		background:url("images/arrow-left.png") no-repeat center center;
	}
	.arrow-btn.right i{
		background:url("images/arrow-right.png") no-repeat center center;
	}
</style>

</head>
<body>

<div class="selection-container">
	<div class="select-box left">
		<div class="select-box-title">未选择 - 告警规则<input type="checkbox" class="checkbox-all" /></div>
		<div class="select-content">
			<ul class="unselect-ul">
				<li>
					<input type="checkbox" class="checkboxs" />
					<span>磁盘使用率普通告警</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" />
					<span>磁盘使用率严重告警</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" />
					<span>内存使用率普通告警</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" />
					<span>内存使用率严重告警</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" />
					<span>CPU使用率普通告警</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" />
					<span>CPU使用率严重告警</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" />
					<span>设备故障告警</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" />
					<span>维护到期告警</span>
				</li>
			</ul>
		</div>
	</div>
	<div class="arrows-box">
		<div class="arrow-btns">
			<div class="arrow-btn right"><i></i></div>
			<div class="arrow-btn left"><i></i></div>
		</div>
	</div>
	<div class="select-box right">
		<div class="select-box-title">已选择 - 告警规则<input type="checkbox" class="checkbox-all" /></div>
		<div class="select-content">
			<ul class="selected-ul">

			</ul>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function(){

		//全选函数
		$('.checkbox-all').click(function(){
			if($(this).prop('checked')){
				$(this).parent().next().find('.checkboxs').prop('checked',true);
			}else{
				$(this).parent().next().find('.checkboxs').prop('checked',false);
			}
		})

		//单个checkbox与全选的关系函数
		$('.select-content').on('click','.checkboxs',function(e){

			var checkedAll = $(this).parents('.select-content').prev().find('.checkbox-all');
			var checkboxs = $(this).prop('checked');
			if(!checkboxs&&checkedAll.prop('checked')){
				checkedAll.prop('checked',false);
			}else if(checkboxs&&!checkedAll.prop('checked')){
				var lis = $(this).parents('ul').children();
				for(var i=0;i<lis.length;i++){
					if($(lis[i]).find('.checkboxs').prop('checked')){
						if(i==lis.length-1){
							checkedAll.prop('checked',true)
						}
					}else{
						break;
					}
				}
			}
			stopFunc(e);
		});
		$('.select-content').on('click','li',function(){
			$(this).children('.checkboxs').click();
		})

		//左右移按钮点击事件
		$('.arrow-btn').click(function(){
			var checkboxs,origin,target,num=0;
			if($(this).hasClass('right')){
				origin = $('.unselect-ul');
				target = $('.selected-ul');
			}else{
				origin = $('.selected-ul');
				target = $('.unselect-ul');
			}
			checkboxs = origin.find('.checkboxs');
			for(var i=0;i<checkboxs.length;i++){					
				if($(checkboxs[i]).prop('checked')){
					var that = $(checkboxs[i]).parent().clone();
					that.children('input').prop('checked',false);
					target.append(that);
					$(checkboxs[i]).parent().remove();
				}else{
					num++;
				}
			}
			if(checkboxs.length == num){
				alert('未选中任何告警规则！');
			}else{
				origin.parent().prev().find('.checkbox-all').prop('checked',false);
			}
		})

	})


	function stopFunc(e){
		e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
	}
</script>
</div>
</body>
</html>